<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>商品详情页</title>
    <link rel="stylesheet" href="../css/detail.css" />
    <link rel="stylesheet" href="../css/base.css" />
  </head>

  <body>
    <div class="header container">
      商品详情
      <p style="display: block">
        <a href="./list.html" style="text-decoration: underline;">列表</a>
      </p>
    </div>

    <div class="content container">
      <div class="left box">
        <div class="middleBox">
          <img src="" class="middleimg" />
        </div>
      </div>
      <div class="right">
        <p class="title">商品名称</p>
        <p class="price">原价: ¥ <span class="old">25.00</span></p>
        <p class="price">折扣: ¥ <span class="discount">0.7</span></p>
        <p class="price">现价: ¥ <span class="curprice">17.50</span></p>
      </div>
    </div>
    <div class="desc container"></div>
    <script src="../lib/jquery.js"></script>
    <script src="../lib/axios.js"></script>
    <script>
      var id = sessionStorage.getItem("productId");
      axios.get(`http://localhost:9000/goods/item/${id}`).then(res => {
        if (res.data.code === 1) {
          const itemInfo = res.data.info;
          document.querySelector(".middleimg").src = itemInfo.img_big_logo;
          document.querySelector(".title").textContent = itemInfo.title;
          document.querySelector(".old").textContent = itemInfo.price;
          document.querySelector(".discount").textContent = itemInfo.sale_type;
          document.querySelector(".curprice").textContent =
            itemInfo.current_price;
          document.querySelector(".desc").innerHTML = itemInfo.goods_introduce;
        } else if (res.data.code === 0) {
          alert(res.data.msg);
        }
      });
    </script>
  </body>
</html>
